<template>
  <div class="table" style="padding:20px">
    <div style="overflow: auto; height: 850px">
      <div style="padding-block-end: 10px">
        <el-input id="task_name" v-model="user_page.account" placeholder="请输入用户名称" style="width: 800px; padding-right: 10px;" />
        <el-button type="primary" size="normal" @click="get_user">搜索</el-button>
        <el-button style="float: right" type="success" @click="add_dialog">新增用户</el-button>
      </div>
      <div>
        <el-table
          :data="table_data"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          style="float:left;width:100%"
        >
          <el-table-column align="center" label="ID">
            <template slot-scope="scope">
              {{ scope.row.user_id }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="用户名" width="300px">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="账号" width="300px">
            <template slot-scope="scope">
              {{ scope.row.account }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="邮箱" width="300px">
            <template slot-scope="scope">
              {{ scope.row.email }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="update_time" label="update_time">
            <template slot-scope="scope">
              <span>{{ scope.row.update_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="create_time" label="create_time">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="action" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="edit_dialog(scope.row.user_id)">编辑</el-button>
              <el-button type="success" size="small" @click="edit_pwd(scope.row.user_id)">修改密码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          :current-page="user_page.current_page"
          :page-sizes="[10, 20, 50]"
          :page-size="user_page.size_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="case_total"
          style="float: left; padding: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div style="padding: 50px">
        <el-dialog
          title="用户"
          :visible.sync="add_user_dialog"
          width="40%"
        >
          <el-form ref="form" :model="user_form" label-width="100px">
            <el-form-item label="用户名：">
              <el-input v-model="user_form.username" />
            </el-form-item>
            <div v-show="1 === number">
              <el-form-item label="账户：">
                <el-input v-model="user_form.account" />
              </el-form-item>
            </div>
            <el-form-item v-show="1 === number" label="密码：">
              <el-input v-model="user_form.password" />
            </el-form-item>
            <div>
              <el-form-item label="email：">
                <el-input v-model="user_form.email" />
              </el-form-item>
            </div>
            <div>
              <el-form-item label="邮箱密码：">
                <el-input v-model="user_form.email_password" />
              </el-form-item>
            </div>
            <el-form-item>
              <div v-show="1 === number">
                <el-button v-if="create_task" type="primary" style="float: right" @click="add_user">立即创建</el-button>
              </div>
              <div v-show="2 === number">
                <el-button v-if="create_task" type="primary" style="float: right" @click="edit_user">保存</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div style="padding: 50px">
        <el-dialog
          title="修改密码"
          :visible.sync="edit_pwd_dialog"
          width="40%"
        >
          <el-form ref="form" :model="pwd_form" label-width="100px">
            <el-form-item label="原密码：">
              <el-input v-model="pwd_form.original_password" />
            </el-form-item>
            <el-form-item label="新密码：">
              <el-input v-model="pwd_form.confirm_password" />
            </el-form-item>
            <el-form-item>
              <el-button v-if="create_task" type="primary" style="float: right" @click="save_pwd">保存</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { edit_password, edit_user, get_user_info, get_user_list } from "@/api/user";

export default {
  name: "UserList",
  components: {

  },
  data() {
    return {
      table_data: [],
      edit_pwd_dialog: false,
      add_user_dialog: false,
      create_task: true,
      user_id: null,
      user_page: {
        account: "",
        current_page: 1,
        size_page: 10,
      },
      case_total: 0,
      number: null,
      user_form: {
        username: "",
        account: "",
        password: ""
      },
      pwd_form: {
        original_password: "",
        confirm_password: ""
      }
    }
  },
  created() {
    this.get_user()
    this.is_login()
  },
  methods: {
    is_login() {
      // eslint-disable-next-line no-prototype-builtins
      if (localStorage.hasOwnProperty("user_id") === false || localStorage.getItem("user_id") === '') {
        this.$router.push("/login")
        this.$message.error("未登录，请前往登录")
      }
    },
    // 页签-条/页 跳转
    handleSizeChange(val) {
      this.user_page.size_page = val
      this.get_user()
    },
    // 底部页签跳转
    handleCurrentChange(val) {
      this.user_page.current_page = val
      this.get_user()
    },
    get_user() {
      const req = this.user_page
      req.user_id = Number(localStorage.getItem("user_id"))
      get_user_list(req).then(res => {
        if (res.data.code === 200) {
          this.table_data = res.data.content
          this.case_total = res.data.case_total
          this.user_page.current_page = res.data.current_page
          this.user_page.size_page = res.data.size_page
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    add_dialog() {
      this.user_form = {
        account: "",
        password: ""
      }
      this.number = 1
      this.add_user_dialog = true
    },
    edit_dialog(user_id) {
      this.number = 2
      this.add_user_dialog = true
      this.user_id = user_id
      get_user_info({ "id": this.user_id, "user_id": localStorage.getItem("user_id") }).then(res => {
        if (res.data.code === 200) {
          this.user_form = res.data.content[0]
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    add_user() {
      const req = this.user_form
      req.account = this.user_form.account
      req.user_id = localStorage.getItem("user_id")
      edit_user(this.user_form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_user_dialog = false
          this.get_user()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    edit_user() {
      const req = this.user_form
      req.id = this.user_id
      req.account = this.user_form.account
      req.user_id = Number(localStorage.getItem("user_id"))
      edit_user(this.user_form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_user_dialog = false
          this.get_user()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    edit_pwd(user_id) {
      this.edit_pwd_dialog = true
      this.user_id = user_id
    },
    save_pwd() {
      const req = this.pwd_form
      req.id = this.user_id
      req.original_password = this.pwd_form.original_password
      req.confirm_password = this.pwd_form.confirm_password
      req.user_id = localStorage.getItem("user_id")
      edit_password(this.pwd_form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.edit_pwd_dialog = false
          this.get_user()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
